<template>
  <div>
    <div class="menu-right" v-if="get_user_info.login">
      <div class="notification-menu">
        <el-dropdown trigger="click" class="notification-list">
          <div class="notification-btn">
            <!--<el-badge :value="msg.sum" class="msg_upper_right" :max="msg.max"/>-->
            <!--<img :src="get_user_info.user.avatar" :alt="get_user_info.user.username"/>-->
            <!--<span v-text="get_user_info.user.name"></span>-->
            <span>

              {{get_user_info.user.username}}
            </span>

            <span class="icon"></span>
          </div>
          <el-dropdown-menu slot="dropdown" class="dropdown-menu">
            <el-dropdown-item class="dropdown-list">
              <a href="javascript:" class="dropdown-btn" @click="user_click(0)">
                <i class="icon fa fa-sign-out"></i>
                <span>安全退出</span>
              </a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {mapActions, mapGetters} from 'vuex'
  import {GET_USER_INFO} from 'store/getters/type'
  import {SET_USER_INFO} from 'store/actions/type'
  import {cookieStorage} from 'common/storage'

  const USER_OUT = 0;
  const USER_INFO = 1;
  const USER_SETTING = 2;
  const USER_MESSAGE = 3;

  export default {
    data() {
      return {
        msg: {
          sum: 200,
          max: 99,
        },
      }
    },
    computed: {
      ...mapGetters({
        get_user_info: GET_USER_INFO
      })
    },
    methods: {
      ...mapActions({
        set_user_info: SET_USER_INFO
      }),
      //退出
      user_out() {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$message.success("已退出")
          cookieStorage.remove("token")
          this.set_user_info(null)
          setTimeout(this.$router.replace({name: "login"}), 500)

        }).catch(() => {

        })
      },
      user_info() {
        //个人信息
        user:{

        }
      },
      salary_info() {
        this.$router.push({name: 'salaryEdit', params: {user: this.get_user_info, indexFlag: 'true'}})
      },
      user_setting() {
        //设置
      },
      user_update_password() {
        this.$router.push({path: '/updatePw'})
      },
      user_click(type) {
        switch (type) {
          case USER_OUT :
            //退出
            this.user_out();
            break;
          case USER_INFO:
            //个人信息
            break;
          case USER_SETTING:
            //设置
            break;
          case USER_MESSAGE:
            this.$router.push({name: 'userMessage'});
            // 个人消息
            break;
        }
      }
    }
  }
</script>
<style>
  .msg_upper_right {
    position: absolute;
    top: -9px;
    right: 39px;
  }

  .msg_right {
    position: absolute;
    top: 17px;
    right: 10px;
  }
</style>
